<template>
	<view class="page-container">
		<view class="form-wrap">
			<label class="form-item">
				<text>姓名：</text>
				<input v-model="form.name" inputAlign="right" placeholder="请输入" type="text" />
			</label>
			<label class="form-item">
				<text>手机号码：</text>
				<input v-model="form.phone" placeholder="请输入" type="number" />
			</label>
			<label class="form-item" @click="showAddressPickerAction">
				<text>所在区域：</text>
				<input v-model="form.areas" placeholder="请选择" disabled type="text" />
				<image class="form-icon" src="@/static/hbxw-address-manage/location.png" />
			</label>
			<label class="form-item">
				<text>详细地址：</text>
				<input v-model="form.addressDetail" placeholder="请输入" type="text" />
			</label>
		</view>

		<label class="radio-label" @click="toggleDefaultChecked">
			<radio color="#287EFF" :checked="form.isDefault" /><text
				:style="{color:form.isDefault ? '#333333' : '#999999' }">设为默认</text>
		</label>

		<bottom-btn-bar isFixed isPlaceholder @click="submit" />
		<hbxw-address-picker :visible="showAddressPicker" :value="initAddress" @cancel="showAddressPicker = false"
			@sure="addressPickerSure" />
	</view>
</template>

<script>
	import bottomBtnBar from '@/components/bottomBtnBar/bottomBtnBar.vue';
	import Schema from 'async-validator';
	export default {
		components: {
			bottomBtnBar
		},
		data() {
			return {
				showAddressPicker: false,
				form: {
					name: '',
					phone: '',
					areas: '',
					addressDetail: '',
					isDefault: false
				},
				initAddress: []
			}
		},
		onLoad(options) {
			if (options.item) {
				const {
					name,
					phone,
					areas,
					addressDetail,
					areasArr
				} = JSON.parse(options.item)
				this.form = {
					name,
					phone,
					areas,
					addressDetail
				};
				this.initAddress = areasArr;
			}
		},
		methods: {
			showAddressPickerAction() {
				this.showAddressPicker = true;
			},
			addressPickerSure(res) {
				console.log('---- addressPickerSure ----:', res);
				this.form.areas = res.simple.join('');
				this.showAddressPicker = false;
			},
			toggleDefaultChecked() {
				this.form.isDefault = !this.form.isDefault;
			},

			submit() {
				// 表单验证规则
				const rules = {
					name: [{
						required: true,
						message: '请输入联系人姓名'
					}],
					phone: [{
						required: true,
						message: '请输入手机号码'
					}, {
						required: true,
						pattern: /^1\d{10}$/,
						message: '请输入正确的手机号',
					}],
					areas: [{
						required: true,
						message: '请选择所在区域'
					}],
					addressDetail: [{
						required: true,
						message: '请输入详细地址'
					}]
				};
				const validator = new Schema(rules);
				const {
					name,
					phone,
					areas,
					addressDetail,
					isDefault
				} = this.form;
				validator.validate({
					name,
					phone,
					areas,
					addressDetail
				}, (errors, fields) => {
					if (errors) {
						uni.showToast({
							title: errors[0].message,
							icon: 'none'
						})
						return;
					}
					console.log('---- 数据提交 ----:', {
						name,
						phone,
						areas,
						addressDetail,
						isDefault
					})
					uni.showToast({
						title: '数据提交',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-wrap {
		padding: 0 32rpx 40rpx 32rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1px solid #E7E7E7;
		font-size: 32rpx;

		input,
		textarea {
			font-size: 32rpx;
			flex: 1;
			text-align: right;
		}

		.form-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 8rpx;
		}
	}

	.radio-label {
		width: 100%;
		height: 124rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}
</style>